<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <script src="../jquery.js"></script>
</head>

<body>
    <form name="form" action="#" method="post" class="form" onsubmit="return check(this)">
        <div><span>姓名：</span><input type="text" name="username" id="name" placeholder="2~20个汉字" />
            <span id="nameTip" style='color:red;font-size:10px;display:none'>2~20个汉字</span>
        </div>
        <div><span>电话：</span><input type="text" name="phone" id="phone" placeholder="1开头的11位数字" />
            <span id="phoneTip" style='color:red;font-size:10px;display:none'>1开头的11位数字</span>
        </div>
        <div><span>身份证：</span><input type="text" name="idCard" id="idCard" placeholder="17~18位数字，最后一位可以是X" />
            <span id="idCardTip" style='color:red;font-size:10px;display:none'>17~18位数字，最后一位可以是X</span>
        </div>
        <div id="password"><span>密码：</span><input type="password" name="pwd1" id="pwd1" placeholder="6~16位数字、字母、符号" />
            <label class="l1">弱</label><label class="l2">中</label><label class="l3">强</label>
            <span id="pwd1Tip" style='color:red;font-size:10px;display:none'>密码6~16位</span>
        </div>
        <div><span>确认：</span><input type="password" name="pwd2" id="pwd2" placeholder="确认密码" />
            <span id="pwd2Tip" style='color:red;font-size:10px;display:none'>密码不一致</span>
        </div>
        <div><span>生日：</span><input type="text" name="birthday" id="birthday" placeholder="格式:2020-11-30" />
            <span id="birthdayTip" style='color:red;font-size:10px;display:none'>格式错误:2020-11-30</span>
        </div>
        <div><span>存款：</span><input type="text" name="deposit" id="deposit" placeholder="格式:￥4,475,648,392.50元" />
            <span id="depositTip" style='color:red;font-size:10px;display:none'>格式:￥4,475,648,392.50元</span>
        </div>
        <div><span>邮箱：</span><input type="text" name="email" id="email" placeholder="符合xxx@xxx规则" />
            <span id="emailTip" style='color:red;font-size:10px;display:none'>符合xxx@xxx规则</span>
        </div>
        <div><span>地址：</span><input type="text" name="address" id="address" placeholder="10~100个字符" />
            <span id="addressTip" style='color:red;font-size:10px;display:none'>10~100个字符</span>
        </div>
        <input type="submit" value="提交" class="submit" />
    </form>

    <script>
        //给文本框注册onkeyup事件
        $("#pwd1").keyup(function () {
            console.log("onkeyup =============")
            console.log($("#password").children("label"))
            if (this.value.length >= 6 && this.value.length <=16) {
                var level = getLvl(this.value)
                if (level != 0) {
                    if (level == 1) {
                        $("#password").children("label.l1").css("background-color", "#008000")
                    }else if (level == 2) {
                        $("#password").children("label").css("background-color", "#ddd")
                        $("#password").children("label.l1").css("background-color", "#008000")
                        $("#password").children("label.l2").css("background-color", "#008000")
                    }else{
                        $("#password").children("label").css("background-color", "#008000")
                    }
                }
                $("#pwd1Tip").css("display", "none")
            }else{
                $("#password").children("label").css("background-color", "#ddd")
                $("#pwd1Tip").css("display", "inline-block")
            }
            function getLvl(str) {
                var s = 0;
                //只有数字或字母
                if (/[0-9]/.test(str)||/[a-zA-Z]/.test(str)) {
                    s++;
                }
                //有数字和字母
                if (/[a-zA-Z]/.test(str)&&/[0-9]/.test(str)) {
                    s++;
                }
                //特殊字符
                if (/[^0-9a-zA-Z_]/.test(str)) {
                    s++;
                }
                return s;
            }
        })

        function check() {
            var allChecked = [0,0,0,0,0,0,0,0]
            // username验证
            var name = document.forms["form"]["username"].value
            var nameTest = /[\u4E00-\u9FA5]{2,20}/.test(name)
            if (!nameTest) {
                $("#nameTip").css("display", "inline-block")
                allChecked[0] = 0
            }else{
                $("#nameTip").css("display", "none")
                allChecked[0] = 1
            }

            // phone验证
            var phone = document.forms["form"]["phone"].value
            var phoneTest = /(^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$)|(\d{3}-\d{8}|\d{4}-\d{7})/.test(phone)
            if (!phoneTest) {
                $("#phoneTip").css("display", "inline-block")
                allChecked[1] = 0
            }else{
                $("#phoneTip").css("display", "none")
                allChecked[1] = 1
            }

            // idCard验证
            var idCard = document.forms["form"]["idCard"].value
            var idCardTest = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(idCard)
            if (!idCardTest) {
                $("#idCardTip").css("display", "inline-block")
                allChecked[2] = 0
            }else{
                $("#idCardTip").css("display", "none")
                allChecked[2] = 1
            }

            // pwd1验证
            var pwd1 = document.forms["form"]["pwd1"].value

            // pwd2验证
            var pwd2 = document.forms["form"]["pwd2"].value
            if (pwd1!=pwd2&&pwd2!="") {
                $("#pwd2Tip").css("display", "inline-block")
                allChecked[3] = 0
            }else{
                $("#pwd2Tip").css("display", "none")
                allChecked[3] = 1
            }

            // birthday验证
            var birthday = document.forms["form"]["birthday"].value
            var idCardNum = idCard.replace(/[\d]{6}([\d]{4})([\d]{2})([\d]{2})[\d]{4}/,("$1$2$3"))
            var birthdayNum = birthday.replace(/([\d]{4})-([\d]{2})-([\d]{2})/,("$1$2$3"))
            console.log(idCardNum + " " + birthdayNum)
            var birthdayTest = /^((19[2-9]\d{1})|(20((0[0-9])|(1[0-8]))))\-((0?[1-9])|(1[0-2]))\-((0?[1-9])|([1-2][0-9])|30|31)$/.test(birthday)
            
            if (!birthdayTest) {
                $("#birthdayTip").text("格式错误:2020-11-30")
                $("#birthdayTip").css("display", "inline-block")
                allChecked[4] = 0
            }else{
                if (idCardNum != birthdayNum) {
                    $("#birthdayTip").text("身份证与生日不一致")
                    $("#birthdayTip").css("display", "inline-block")
                } else{
                    $("#birthdayTip").css("display", "none")
                    allChecked[4] = 1
                }
                
            }

            // deposit验证
            var deposit = document.forms["form"]["deposit"].value
            var depositTest = /^(￥)([1-9]{1,3}$)+/.test(deposit)

            if (!depositTest) {
                $("#depositTip").css("display", "inline-block")
                allChecked[5] = 0
            }else{
                $("#depositTip").css("display", "none")
                allChecked[5] = 1
            }

            // email验证
            var email = document.forms["form"]["email"].value
            var atpos = email.indexOf("@");
            var dotpos = email.lastIndexOf(".");
            if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
                $("#emailTip").css("display", "inline-block")
                allChecked[6] = 0
            }else{
                $("#emailTip").css("display", "none")
                allChecked[6] = 1
            }

            //address验证
            var address = document.forms["form"]["address"].value
            var addressTest = /\S/.test(address)
            if (!addressTest) {
                $("#addressTip").css("display", "inline-block")
                allChecked[7] = 0
            }else{
                $("#addressTip").css("display", "none")
                allChecked[7] = 1
            }
            var isChecked = true
            allChecked.forEach(function(x){
                if (x == 0){
                    isChecked = false
                }
            })
            console.log(allChecked)
            console.log(isChecked)
            return isChecked
        }
    </script>
</body>

</html>

<style type="text/css">
    form {
        width: 600px;
        overflow: hidden;
        margin: 50px auto;
    }

    input {
        width: 250px;
        padding-left: 10px;
        height: 30px;
        color: #333;
        font-size: 14px;
        border: 1px solid #666;
        outline: none;
        margin: 5px;
        display: inline-block;
    }

    span {
        display: inline-block;
        width: 70px
    }

    .submit {
        width: 120px;
        background: #666;
        color: #fff;
        margin-left: 70px;
        cursor: pointer;
    }

    label {
        font-size: 0.5em;
        display: inline-block;
        text-align: center;
        width: 50px;
        background-color: #ddd;
        padding: 1px;
        color: #fff;
        margin: 1px
    }

    div {
        display: flex;
        align-items: center
    }
</style>